<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>

<body>
    <div>
        <div id="box"></div>
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
    </div>
    <script>
        const btn1 = document.getElementById('btn1')
        const btn2 = document.getElementById('btn2')

        let index = 99999

        const calc = () => {
            while (index > 0) {
                const num = Math.random() > 0.5 ? Math.random() : Math.random()
                index--
                console.log(num)
                console.log(index)
            }
        }

        // const calc = (deadline) => {
        //     while (index > 0 && deadline.timeRemaining() > 1) {
        //         const num = Math.random() > 0.5 ? Math.random() : Math.random()
        //         index--
        //         console.log(num)
        //         console.log(index)
        //     }
        //     requestIdleCallback(calc)
        // }
        btn1.addEventListener('click', function () {
            calc()
            // requestIdleCallback(calc)
        })

        btn2.addEventListener('click', function () {
            document.getElementById('box').style.background = '#ff0000'
        })
    </script>
</body>

</html>